import React from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  useColorScheme, TouchableOpacity,
} from 'react-native';

// 定义 Note 卡片组件的 props 类型
interface NoteCardProps {
  noteId: number;
  imageUrl: string;
  title: string;
  content: string;
  authorAvatarUrl: string;
  authorId: string;
  viewCount: number;
  navigation: any; // 添加 navigation 属性
}

// Note 卡片组件
const SearchNoteCard: React.FC<NoteCardProps> = ({
  noteId,
  imageUrl,
  title,
  content,
  authorAvatarUrl,
  authorId,
  viewCount,
  navigation,
}) => {
  const colorScheme = useColorScheme();
  const isDarkMode = colorScheme === 'dark';

  return (
    <TouchableOpacity activeOpacity={0.5} onPress={() => {navigation.navigate('NoteDetailScreen', { noteId });}}>
    <View style={[styles.container, { borderBottomColor: isDarkMode ? '#333' : '#ccc' }]}>
      {/* 左边的图片 */}
      <Image source={{ uri: imageUrl }} style={styles.leftImage} />
      {/* 右边的内容 */}
      <View style={styles.rightContent}>
        {/* 标题 */}
        <Text style={[styles.title, { color: isDarkMode ? '#fff' : '#000' }]}>{title}</Text>
        {/* 部分正文 */}
        <Text style={[styles.content, { color: isDarkMode ? '#999' : '#666' }]}>{content}</Text>
        {/* 作者信息和观看次数 */}
        <View style={styles.authorInfo}>
          {/* 作者头像 */}
          <Image source={{ uri: authorAvatarUrl }} style={styles.authorAvatar} />
          {/* 作者 ID */}
          <Text style={[styles.authorId, { color: isDarkMode ? '#999' : '#666' }]}>{authorId}</Text>
          {/* 观看次数 */}
          <Text style={[styles.viewCount, { color: isDarkMode ? '#999' : '#666' }]}>{`${viewCount} 次观看`}</Text>
        </View>
      </View>
    </View>
    </TouchableOpacity>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 10,
    borderBottomWidth: 1,
  },
  leftImage: {
    width: 100,
    height: 100,
    borderRadius: 8,
  },
  rightContent: {
    flex: 1,
    marginLeft: 10,
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    fontSize: 14,
  },
  authorInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  authorAvatar: {
    width: 20,
    height: 20,
    borderRadius: 10,
    marginRight: 5,
  },
  authorId: {
    fontSize: 12,
  },
  viewCount: {
    fontSize: 12,
  },
});

export default SearchNoteCard;


